<template>
  <div id="student">
    <el-table
    :data="this.$store.getters.getShowData"
    border
    style="width: 100%"
    >
      <el-table-column
        prop="id"
        label="学号"
      >
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
      >
      </el-table-column>
      <el-table-column
        prop="age"
        label="年龄">
      </el-table-column>
      <el-table-column
        prop="class"
        label="班级">
      </el-table-column>
      <el-table-column
        prop="parentTel"
        label="家长电话">
      </el-table-column>
      <el-table-column
        prop="parentEmail"
        label="家长邮箱">
      </el-table-column>
      <el-table-column
        label="操作"
      >
      <template slot-scope="scope">
        <!-- <el-button type="primary" icon="el-icon-edit" @click="editStu(scope.$index,scope.row)"></el-button> -->
        <el-button type="primary" icon="el-icon-edit" @click="open"></el-button>
        <el-button type="danger" icon="el-icon-delete" @click="delone(scope.$index,scope.row)"></el-button>
      </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div id="mypager">
      <el-pagination
        background
        :page-size="5"
        layout="prev, pager, next"
        :total="this.$store.getters.getTotal"
        hide-on-single-page
        @current-change="currentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { mapActions } from 'vuex'
import Aboutchild from '../components/AboutChild'
export default {
  name: 'Student',
  comments: {
    Aboutchild
  },
  created () {
    this.getAllDataAction()
  },
  methods: {
    ...mapActions([
      'getAllDataAction',
      'setShowpageAction',
      'deleteFromAllDataAction'
    ]),
    currentChange (val) {
      /* 改变当前显示页 */
      this.setShowpageAction(val)
    },
    delone (index, row) {
      console.log(index, row)
      console.log(index, row.id)
      this.$axios({
        method: 'delete',
        url: '/mock/42/deleteStu'
      }).then(res => {
        console.log(res.data.message)
        if (res.data.code === 400) {
          this.$message({
            message: '删除失败',
            type: 'error'
          })
        } else if (res.data.code === 200) {
          // 判断当前页的显示数据长度为 1
          if (this.$store.getters.getShowData.length === 1) {
            // 被点击删除的是最后一条数据了
            console.log(this.$store.getters.getShowData.length === 1, '')
            const val = this.$store.state.showpage - 1
            this.setShowpageAction(val)
          }
          // 提示显示成功
          this.$notify({
            title: 'finished',
            message: '删除成功',
            type: 'success'
          })
          // 删除数据
          // this.deleteFromAllDataAction(row.id)
          this.deleteFromAllDataAction(index)
          console.log(this.$store.getters.getTotal)
        }
      }).catch(err => {
        console.log(err, '')
      })
    },
    editStu (index, row) {
      console.log('编辑', '')
      this.$prompt({
        title: '编辑学生信息',
        showClose: true,
        showConfirmButton: true,
        center: true,
        confirmButtonText: '确认修改'
      })
    },
    open () {
      const h = this.$createElement
      this.$msgbox({
        title: '消息',
        message: h('div', null, [
          Aboutchild
        ]),
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true
            instance.confirmButtonText = '执行中...'
            setTimeout(() => {
              done()
              setTimeout(() => {
                instance.confirmButtonLoading = false
              }, 300)
            }, 3000)
          } else {
            done()
          }
        }
      }).then(action => {
        this.$message({
          type: 'info',
          message: 'action: ' + action
        })
      })
    }
  }
}

</script>
<style>
#student {
  width: 100%;
}
#mypager {
  padding: 20px 0;
  text-align: center;
}
</style>
